<!-- 这里写脚本分享平台的界面 -->
<template>
	<div class="list-box">
		<el-button type="primary" @click="handleAdd">
			<el-icon>
				<Plus />
			</el-icon> 导入
		</el-button>
		<el-table :data="shareList" style="width: 100%; margin-top: 10px;">
			<el-table-column type="index" label="序号" align="center" width="55" />
			<el-table-column property="scriptId" label="脚本ID" align="center"></el-table-column>
			<el-table-column property="scriptName" label="脚本名称" align="center"></el-table-column>
			<el-table-column property="scriptContent" label="脚本介绍" align="center"></el-table-column>
			<el-table-column property="userName" label="作者名" align="center"></el-table-column>
			<el-table-column label="操作" align="center">
			    <template #default="scope">
			        <template v-if="scope.row.userName === user_name">
			            <el-button link type="primary" size="small" @click="handleDelete(scope.row)">
			                <el-icon>
			                    <EditPen />
			                </el-icon> 删除
			            </el-button>
			        </template>
			        <template v-else>
			            <el-button link type="primary" size="small" @click="handleDownload(scope.row)">
			                <el-icon>
			                    <EditPen />
			                </el-icon> 下载
			            </el-button>
			        </template>
			    </template>
			</el-table-column>
		</el-table>

		<!-- 对话框 -->
		<el-dialog v-model="showDialog" :title="dialogTitle" width="500">
			<component :is="showComp" v-if="showComp" :scriptId="showScriptId" @refreshEvent="handleRefresh"></component>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ElTable,
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		onMounted,
		ref
	} from 'vue'
	import axios from 'axios'

	import {
		useRouter
	} from 'vue-router'

	// 导入或者下载组件
	import ScriptAdd from './add.vue'
	// 路由实例对象

	const router = useRouter()

	// 初始化弹窗
	const showDialog = ref(false)
	// 弹窗标题
	const dialogTitle = ref('')
	// 动态切换组件
	const showComp = ref(null)
	// 传递的scriptId参数
	const showScriptId = ref(null)

	// 初始化脚本列表数据
	const shareList = ref([])
	
	const user_name = ref(localStorage.getItem('user_name')); 
	// 监听挂载成功的回调函数
	onMounted(() => {
		getScriptData()
	})

	// 封装一个方法 用于获取脚本列表数据
	const getScriptData = () => {
	    axios.get('/api/script/script/list').then(res => {
	        //console.log(res);
	        if (res.data.code === 200) {
	            // 过滤出 script_status 为 1 的数据
	            shareList.value = res.data.data.filter(script => script.scriptStatus == 1);
	        } else {
	            shareList.value = [];
	        }
	    }).catch(err => {
	        console.error(err); // 输出错误信息
	        shareList.value = []; // 在发生错误时清空列表
	    });
	}
	// 监听点击导入按钮时 执行的方法
	const handleAdd = () => {
		showDialog.value = true
		dialogTitle.value = '导入脚本'
		showComp.value = ScriptAdd
		showScriptId.value = null
	}
	// 监听点击下载按钮时 执行的方法
	const handleDownload = async (row) => {
	    try {
	        // 创建一个新的脚本对象
	        const newScript = {
	            scriptName: row.scriptName,
	            scriptContent: row.scriptContent,
	            userName: user_name.value,
	            scriptStatus: 0
	        };
	
	        // 调用新增脚本的 API
	        const response = await axios.post('/api/script/script/add', newScript);
	
	        if (response.data.code === 200) {
	            ElMessage({
	                message: '下载成功',
	                type: 'success'
	            });
	            getScriptData(); // 刷新脚本列表数据
	        } else {
	            ElMessage({
	                message: '下载失败',
	                type: 'error'
	            });
	        }
	    } catch (error) {
	        console.error('Error downloading script:', error);
	        ElMessage({
	            message: '网络错误',
	            type: 'error'
	        });
	    }
	};
	// 监听点击删除按钮时 执行的方法
	const handleDelete = (row) => {
		ElMessageBox.confirm(
			'确认要删除选中的脚本吗?',
			'提示信息', {
				confirmButtonText: '是',
				cancelButtonText: '否',
				type: 'warning',
			}
		).then(async () => {
			try {
				// 创建一个更新的脚本对象
				const updatedScript = {
					...row,
					scriptStatus: 0 // 将脚本状态设置为0
				};
		
				// 调用更新脚本状态的 API
				const response = await axios.put('/api/script/script/edit', updatedScript);
		
				if (response.data.code === 200) {
					ElMessage({
						message: '删除成功',
						type: 'success'
					});
					getScriptData(); // 刷新数据
				} else {
					ElMessage({
						message: '删除失败',
						type: 'error'
					});
				}
			} catch (error) {
				console.error('Error updating script status:', error);
				ElMessage({
					message: '网络错误',
					type: 'error'
				});
			}
		}).catch(() => {
			console.log('用户取消了删除脚本的操作');
		});
	}

	// 监听新增或者修改子组件回调刷新 
	const handleRefresh = () => {
		showDialog.value = false
		showScriptId.value = null
		// 刷新脚本信息列表
		getScriptData()
	}
</script>

<style>
</style>